import * as React from 'react';
import {observer} from 'mobx-react'
import styles from './index.scss';

import Left from '../../../components/Left'
import Right from '../../../components/Right'

interface IProps {
    dataX: string[]
    dataYB: number[]
    dataYL: number[]
    uptime_rate: number
}

@observer
class Home extends React.Component<IProps> {

    constructor(props) {
        super(props);
    }


    public render() {
        const {dataX, dataYB, dataYL, uptime_rate} = this.props
        return (
            <div className={styles.container}>
                <div className={styles.title}>
                    DOWN HOURS SUMMARY
                </div>
                <div className={styles.time}>Down time</div>
                <div className={styles.bottom}>
                    <Left dataYL={dataYL} dataYB={dataYB} dataX={dataX} />
                    <div className={styles.bottomC}>
                        <Right uptime_rate={uptime_rate} />
                        <div className={styles.text}>Uptime time</div>
                    </div>
                </div>
            </div>
        );
    }
}

export default Home;
